<!-- 登录方式切换 -->
<template>
	<view class="login-ways">
		<view class="item uv-flex-row" :class="[{'active':ways.activeIndex == index}]" v-for="(item,index) in ways.list" :key="index" @click="changeWay(item,index)">{{item.title}}</view>
	</view>
</template>
<script setup>
	import { reactive, ref, watch } from 'vue';
	const emits = defineEmits(['change']);
	const props = defineProps({
		value: {
			type: [String],
			default: 'mobile'
		}
	})
	const ways = reactive({
		activeIndex: 0,
		list: [{
			id: 1,
			title: '手机登录',
			name: 'mobile',
			children: [{
				id: 1,
				title: '验证码'
			}, {
				id: 2,
				title: '密码'
			}]
		}, {
			id: 2,
			title: '账号登录',
			name: 'account'
		}, {
			id: 3,
			title: '微信扫码',
			name: 'weixin'
		}]
	})
	watch(() => props.value, (newVal) => {
		const findIndex = ways.list.findIndex(item => item.name == newVal);
		ways.activeIndex = findIndex ? findIndex : 0;
	}, { immediate: true })
	// 切换登录方式
	function changeWay(item, index) {
		ways.activeIndex = index;
		emits('change', item.name);
	}
</script>
<style scoped lang="scss">
	.login-ways {
		position: fixed;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		.item {
			align-items: center;
			justify-content: center;
			width: 240px;
			height: 48px;
			margin: 10px 0;
			border-radius: 0 12px 24px 0;
			background: #333;
			text-align: center;
			font-size: 18px;
			color: rgb(127, 133, 150);
			opacity: 0.6;
			cursor: pointer;
			transition: all .3s;
			&:hover {
				color: #fff;
			}
			&.active {
				width: 320px;
				height: 56px;
				background: #999;
				font-weight: 700;
				color: rgb(249, 250, 252);
			}
		}
	}
</style>